extends ../_layout

block active
  - sidebar_active = 'maps-google.html'

block content
  
  h3 Google Maps
    small Easy usage directly from data attribute

  .row
    .col-md-6
      .panel.panel-default
        .panel-heading Classic Map
        .panel-body
          .gmap(data-gmap="", data-address="276 N TUSTIN ST, ORANGE, CA 92867")
    .col-md-6
      .panel.panel-default
        .panel-heading Custom zoom
        .panel-body
          .gmap(data-gmap="", data-address="276 N TUSTIN ST, ORANGE, CA 92867", data-zoom="19")
  .row
    .col-md-6
      .panel.panel-default
        .panel-heading Different Map Type
        .panel-body
          .gmap(data-gmap="", data-address="276 N TUSTIN ST, ORANGE, CA 92867", data-maptype="SATELLITE")
    .col-md-6
      .panel.panel-default
        .panel-heading Multiple Addresses
        .panel-body
          .gmap(data-gmap="", data-address="276 N TUSTIN ST, ORANGE, CA 92867; 376 N TUSTIN ST, ORANGE, CA 92867", data-title="Location 1; Location 2")

  .row
    .col-md-12
      .panel.panel-default
        .panel-heading Styled Maps
        .panel-body
          .gmap(data-gmap="", data-address="276 N TUSTIN ST, ORANGE, CA 92867", data-maptype="ROADMAP", data-styled)

block vendor_js
  // GOOGLE MAPS
  script(type='text/javascript', src='http://maps.google.com/maps/api/js?sensor=false')
  script(src='../vendor/jQuery-gMap/jquery.gmap.min.js')